<template>
  <!-- 添加 -->
  <el-dialog title="添加分类" draggable @close="cancelModal">
    <div>
      <el-input v-model="category_name" placeholder="请输入分类名称" />
    </div>
    <template #footer>
      <el-button @click="cancelModal">取消</el-button>
      <el-button type="primary" @click="confirmModal">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { addCategory, editCategory } from '@/apis/category';
  const props = defineProps(['row']);
  const emits = defineEmits(['update:modelValue', 'update:row', 'reloadList']);
  let category_name = ref('');
  let category_id = ref('');
  watch(
    () => props.row,
    val => {
      category_name.value = val?.name;
      category_id.value = val?.category_id;
    }
  );
  // 取消
  const cancelModal = () => {
    category_name.value = '';
    category_id.value = '';
    emits('update:modelValue', false);
  };
  // 确认
  const confirmModal = async () => {
    let res;
    if (category_id.value) {
      res = await editCategory({ name: category_name.value, id: category_id.value });
    } else {
      res = await addCategory({ name: category_name.value });
    }
    if (res.code != 200) ElMessage.error(res.msg);
    ElMessage.success(res.msg);
    emits('reloadList');
    cancelModal();
  };
</script>

<style scoped></style>
